<template>
  <div>
    <el-table :data="cTableData.list" :loading="loading" element-loading-text="加载中..." border border-radius
              :summary-method="getSummaries"
              :local-summary-method="getLocalSummaries"
              show-summary
              show-local-summary
              @sort-change="sortChange"
    >
      <el-table-column
        align="center"
        prop="date"
        label="日期">
      </el-table-column>

      <el-table-column
        align="center"
        prop="bonus"
        label="红利总额">
        <template slot-scope="{row}">
          {{row.bonus | currency}}
        </template>
      </el-table-column>

      <el-table-column
        align="center"
        prop="rebate"
        label="返水总额">
        <template slot-scope="{row}">
          {{row.rebate | currency}}
        </template>
      </el-table-column>

      <template slot="empty">
        <div class="el-table__empty">
          <svg-icon class="el-table__empty-icon" icon-class="grid-empty-2"></svg-icon>
          <div class="el-table-text">暂无数据</div>
        </div>
      </template>
    </el-table>

    <div class="el-pagination-container">
      <el-pagination
        bordered
        @size-change="localGridSizeChange" @current-change="localGridCurrentChange"
        :current-page="filters.page" :page-size="filters.size"
        :total="tableData.total">
      </el-pagination>
    </div>
  </div>
</template>

<script type="text/jsx">

  import {
    bonusRebateDetailApi as getApi,
  } from '@/services/api/report';

  import {grid} from '@/build';

  import commonMixins from './common';

  export default {
    name: "sub-member-dividend",

    mixins: [grid, commonMixins],

    data() {
      return {
        filters: {
          page: 1,
          size: 10,
        },
        tableData: {
          list: [],
          total: 0,
        },
        statistic: [
          {
            index: 1,
            prop: 'tableData.sum.bonus',
            format: (value) => {
              return <div>{_.currency(value)}</div>;
            }
          },
          {
            index: 2,
            prop: 'tableData.sum.rebate',
            format: (value) => {
              return <div>{_.currency(value)}</div>;
            }
          },
        ]
      };
    },

    mounted() {
      this.bindGet(getApi, 'tableData', {
        action: 'getGrid',
        sendingData: 'filters',
        format: data => {
          data.list = _(data.list).map((info, date) => {
            return {
              date,
              ...info
            };
          }).orderBy(['date'], ['desc']).value();
          data.total = _.size(data.list);
          return data;
        }
      });

      this.getAll();
    }
  };

</script>

